<html>
<head>
<script th:inline="javascript">
    var url=[[${sequenceUrl}]];
    console.log(url);
	var myChart = echarts.init(document.getElementById('monitor_log_echarts'));
	var myChart2 = echarts.init(document.getElementById('monitor_log_echarts_pie'));
    option1 = {
    		color : [ '#6a7985' ],
    	       title : {
    	            text: [[${sequenceName}]]+'耗时(ms)',
    	            subtext: '地址：'+[[${sequenceUrl}]],
    	            textStyle : {
                        color : 'black',
                    },
                    left : 'center'
    	        },
    	        legend : {
    	        	data:[[${sequenceName}]],
                    show : false
                },
    	        tooltip : {
    	        	 trigger : 'axis',
    	                position : 'top',
    	                axisPointer : {
    	                    type : 'cross',
    	                    label : {
    	                        backgroundColor : '#383838'
    	                    }
    	                }
    	        },
                grid : {
                    left : '4%',
                    right : '6%',
                    bottom : '4%',
                    top : 80,
                    containLabel : true
                },
                xAxis : [ {
                    type : 'category',
                    boundaryGap : true,
                    axisLine : {
                        show : true,
                        lineStyle : {
                            color : '#17273B',
                            width : 1,
                            type : 'solid'
                        }
                    },
                    axisLabel : {
                        show : true,
                        fontSize : 12,
                        color : 'black',
                        rotate:60
                    },
                    data : [[${myNameList}]]
                } ],
                yAxis : [ {
                    type : 'value',
                    axisLabel : {
                        show : true,
                        color : 'black',
                        fontSize : 12
                    },
                    axisLine : {
                        show : false
                    },
                    splitLine : {
                        show : true,
                        lineStyle : {
                            color : '#D1D1D1',
                            width : 1,
                            type : 'solid',
                        }
                    }
                } ],
                series : [ {
                    name : [[${sequenceName}]],
                    type : 'line',
                    smooth : true,
                    symbol : 'circle',
                    symbolSize : 6,
                    lineStyle : {
                        color : {
                            type : 'linear',
                            x : 0,
                            y : 0,
                            x2 : 0,
                            y2 : 1,
                            colorStops : [ {
                                offset : 0,
                                color : '#EEE9E9'
                            }, {
                                offset : 1,
                                color : '#00A65A'
                            } ],
                            globalCoord : false
                        },
                        width : 2,
                        type : 'solid',
                    },
                    itemStyle : {
                        color : '#f15a22'
                    },
                    areaStyle : {
                        color : '#00ae9d'
                    },
                    data : [[${myValueLogList}]],
                    markLine : 
                    {
                    	data:[
                    		{type : 'average', name: '平均值'}
		                  　　　　　　],
		                lineStyle : {
		                	color : '#008792'
		                  }
                  　　　　		} 
                } ]
        };
    
    option2 = {
    		 title: {
    	            text: [[${sequenceName}]]+'_耗时分布',
    	            x: 'center'
    	        },
    	        tooltip: {
    	            trigger: 'item',
    	            formatter: "{a} <br/>{b} : {c} ({d}%)"
    	        },
    	        color: [  '#9ACD32','#00CED1','#FFC0CB', '#CD5C5C'],
    	        stillShowZeroSum: false,
    	        series: [
    	            {
    	                name: [[${sequenceName}]]+'_耗时分布',
    	                type: 'pie',
    	                radius: '60%',
    	                center: ['50%', '60%'],
    	                data:[[${myLogPieList}]],
    	                itemStyle: {
    	                    emphasis: {
    	                        shadowBlur: 10,
    	                        shadowOffsetX: 0,
    	                        shadowColor: 'rgba(128, 128, 128, 0.5)'
    	                    }
    	                }
    	            }
    	        ]
        };
	myChart.setOption(option1);
	
	myChart2.setOption(option2);
	
	function copyUrl()
	{
		var	oInput = document.createElement('input');
		oInput.value = url;
	 	document.body.appendChild(oInput);
     	oInput.select();
     	document.execCommand("Copy");
     	oInput.style.display = 'none';
     	document.body.removeChild(oInput);
     	
     	bw.toast("地址："+url +"     复制成功！");
	}
	
	function copyShortUrl()
	{ 
		var shortUrl=url.replace("http://","");
		var index = shortUrl.indexOf("\/");
		if(index>0){
	    	shortUrl = shortUrl.substring(index + 1, url.length);
	    }
	    
		var	oInput = document.createElement('input');
		oInput.value = shortUrl;
	 	document.body.appendChild(oInput);
     	oInput.select();
     	document.execCommand("Copy");
     	oInput.style.display = 'none';
     	document.body.removeChild(oInput);
     	
     	 bw.toast("短URL地址："+shortUrl +"     复制成功！");
	}
	
	var bw = {};
	bw.list = [];
	bw.toast = function( txt ){
	    var i = 38;
	    if( bw.list.length ){
	        bw.list.forEach( function(element, index) {
	            element.setAttribute('style', 'bottom: '+(bw.list.length-index)*i+'px;');
	        });
	    }
	    var toast = document.createElement('div');
	    toast.classList = 'bw-toast';
	    toast.setAttribute('style', 'bottom: -40px;');
	 
	    var msg = document.createTextNode(txt);
	    toast.append(msg);
	    bw.list.push(toast);
	    document.body.append(toast);
	 
	    setTimeout(function(){
	        toast.setAttribute('style', 'bottom: 0px;');
	    }, 0)
	    setTimeout(function(){
	        toast.parentNode.removeChild(toast);
	        bw.list.shift();
	    }, 2000)
	}
</script>
</head>
<body>
	<div class="content-wrapper">
		<section class="content-header">
			<h1>
				<ol class="breadcrumb">
					<li><i class="fa fa-dashboard"></i> 主页</li>
					<li>API(24H)监控</li>
					<li class="active">监控图表</li>
				</ol>
			</h1>
		</section>

		<section class="content">
			<div class="row">
				<div class="col-xs-12">
					<div class="box">
						<div id="monitor_log_echarts"
							style="margin: 0 auto; width: 100%; height: 400px;"></div>
						<div id="monitor_log_echarts_pie"
							style="margin: 0 auto; width: 100%; height: 200px;"></div>

						<div class="box-footer" style="text-align: right;">
							<a class="btn btn-default" onClick="copyShortUrl()">复制短URL地址</a>
							<a class="btn btn-default" onClick="copyUrl()"
								style="margin-left: 20px;">复制URL地址</a> <a
								class="btn btn-default" href="/monitorList"
								style="width: 100px; margin-left: 20px;">返回</a>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</body>
</html>